<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        body,html{
            min-width: 1400px;
        }
        #Box {
            width: 100%;
        }

        h1 {
            height: 68px;
            width: 11.16%;
            margin-left: 0.5%;
        }

        h1 img {
            width: 100%;
            height: 50px;
            margin-top: 9px;
            margin-bottom: 9px;
        }

        .main {
            width: 100%;
            height: 650px;
            background: url("img/loginbg.png")no-repeat 0px 0px;
            background-size: 100% 100%;
        }

        .main .register {
            width: 23.7%;
            height: 365px;
            border-radius: 5px;
            background: #ffffff;
            float: left;
            margin-left: 61.2%;
            margin-top: 50px;
        }

        .register h2 {
            width: 50%;
            height: 50px;
            font: 24px/50px "simhei";
            text-align: center;
            float: left;
        }

        .register .QR {
            background: #eeeeee;
            border-radius: 0px 5px 0px 0px;
        }

        .register .erweima {
            width: 100%;
            height: 315px;
            position: relative;
            display: none;
            margin-top: 50px;
        }

        .register .erweima img {
            width: 100%;
            height: 100%;
            position: absolute;

            left: 0px;
            top: 0px;

        }

        .register .Inp1 {
            margin-top: 100px;
            width: 80%;
            margin-left: 10%;
            height: 40px;
            border-radius: 4px;
            border: 1px solid #cccccc;
        }

        .register #username {
            margin-left: 1.5%;
            width: 97%;
            height: 38px;
            border-radius: 4px;
            margin-right: 1.4%;
            border: 0px;
            outline: none;
            /* box-sizing: border-box;  */
        }

        .register .Inp2 {
            margin-top: 30px;
            width: 80%;
            margin-left: 10%;
            height: 40px;
            border-radius: 4px;
            border: 1px solid #cccccc;
        }

        .register #password {
            margin-left: 1.5%;
            width: 97%;
            height: 38px;
            border-radius: 4px;
            margin-right: 1.4%;
            border: 0px;
            outline: none;
        }

        ul {
            width: 80%;
            margin-top: 30px;
            margin-left: 10%;
        }

        ul .L1 {
            float: left;
            margin-right: 46%;
            font-size:14px;
        }
        ul li a{
            font-size:14px;
        }

        .register .enter {
            float: left;
            width: 30%;
            height: 40px;
            margin-top: 30px;
            margin-left: 15%;
            border: 1px solid #cccccc;
            background: #3590e6;
            border-radius: 5px;
            text-align: center;
            font: 20px/40px "幼圆";
            color: #ffffff;
        }

        .register .enter:hover {
            background: lightblue;
            color: #3590e6 !important;
        }

        .register .login:hover {
            background: lightblue;
            color: #3590e6 !important;
        }

        .register .login {
            float: left;
            width: 30%;
            height: 40px;
            margin-top: 30px;
            margin-left: 9%;
            border: 1px solid #cccccc;
            background: #ffffff;
            border-radius: 5px;
            text-align: center;
            font: 20px/40px "幼圆";
            color: #000000;
        }

        .bottom {
            width: 100%;
            height: 36px;
            text-align: center;
            line-height: 36px;
        }

        input[type="checkbox"] {
            width: 14px;
            height: 14px;
            display: inline-block;
            vertical-align: middle;
            line-height: 12px;
            text-align: center;
            position: relative;
        }

        input[type="checkbox"]::before {
            content: " ";
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #fff;
            width: 100%;
            height: 100%;
            border: 1px solid #dcdfe6;
            border-radius: 2px;
        }

        input[type="checkbox"]:checked::before {
            content: "\2713";
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            color: #fff;
            background-color: #54a0ec;
            border: 1px solid #409eff;
            font-size: 12px;
        }

        input[type="checkbox"]:hover {
            border: 1px solid #409eff;
        }
        .error {
            color: red;
            font-size:10px;
         }
    </style>
</head>

<body>
    <div id="Box">
        <h1><img src="img/logo.png" alt=""></h1>
        <div class="main" class="clear">
            <div class="register" class="clear">
                <h2 class="user">用户名登录</h2>
                <h2 class="QR">二维码登录</h2>
                <div class="erweima"><img src="img/erweima.png" alt=""></div>
                <form class="denglu">
                    <div class="Inp1">
                        <input type="text" placeholder="请输入手机号/员工名" name="username" id="username" autocomplete="off">
                    </div>
                    <div class="Inp2">
                        <input type="password" placeholder="请输入密码" name="password" id="password">
                    </div>
                    <ul class="clear">
                        <li class="L1"><input type="checkbox" class="checkbox">记住密码</li>
                        <li><a href="javascript:void(0)">忘记密码?</a></li>
                    </ul>
                    <a href="javascript:void(0)">
                        <input type="submit" class="enter" value="登录">
                    </a>
                    <a href="Register.html">
                        <div class="login">注册</div>
                    </a>
                </form>

            </div>
        </div>
        <div class="bottom">量子矩阵公司 版权所有 Copyright@2018-2019 QUTO Corproation, All Rights Reserved</div>
    </div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script>
<script src="js/oApublic.js"></script>
<script>
    $("#username").val(localStorage.getItem("name"));
    $("#password").val(localStorage.getItem("pass"));
    $('.QR').on('click', function () {
        $('.erweima').css("display", 'block'),
            $('.denglu').css("display", 'none'),
            $(this).css('background', '#ffffff')
        $('.user').css('background', '#eeeeee')
    })
    $('.user').on('click', function () {
        $('.erweima').css("display", 'none'),
            $('.denglu').css("display", 'block'),
            $(this).css('background', '#fff'),
            $('.QR').css('background', "#eee")
    })
    $('.denglu').validate({
        rules: {
            username:'required' ,
            password: 'required',
            checkbox: 'required'
        },
        massages: {
            username: '请输入用户名',
            password: '请输入密码',
            checkbox: '请勾选' 
            
        },
        submitHandler: function() {
  }
   })
    $('.enter').on('click', function () {
        $.ajax({
            url:Loginurl,
            type: 'POST',
            dataType:'json',
            data: {
               username: $('#username').val(),
               password: $('#password').val()
            // username:"admin",
            // password:"123"
            },
            success: function (data) {
                
                console.log(data);
                if(data.code == 100){
                    var stringData = JSON.stringify(data) ;
                    localStorage.setItem("stringData",stringData);
                    console.log(stringData);
                    // alert(1);
                    localStorage.setItem("name", $('#username').val());
                    if($(".checkbox").prop("checked") == true){
                        localStorage.setItem("pass", $('#password').val());
                    }else{
                        localStorage.setItem("pass", "");
                    }
                    localStorage.setItem("login","1");
                    localStorage.setItem("empId",data.result[0].empId);
                    window.location = 'index.html';
                }
                else{
                    alert('登录失败')
                }
            },
            error: function (xhr, errorInfo) {
                console.log("-------")
                alert("error")
            }
        })
    })
</script>

</html>